<!DOCTYPE html>
<html>
<head>
<style type="text/css">
label {
	width: 80px;
	display: inline-block;
}
</style>
<meta charset="utf-8">
<script type="text/javascript">
	var params = {};

	/**
	* Переводит Значение элементов формы в Объект вида: {param1:value1, param2:value2, ...} 
	* @param {HTMLFormElement} form
	* @return {object} object
	*/
	function formToObject(form) {
		alert (form);
		var obj = {};
		for (var i = 0; i < form.elements.length; i++) {
			var inp = form.elements[i];
			obj[inp.name] = inp.value;

		}
		return obj;
	}

/**
 * Основная функция программы. 
 */

	function clicked(obj) {
		if (obj.value == "Пуск!") {
			obj.value = "Еще раз!"
			document.getElementById('enterData').innerHTML = "Внесите изменения в даннные";
			params = formToObject(document.forms[0]);
			//alert(params.fio);
		} else {
			var tObj = formToObject(document.forms[0]);
			var tstr = '';
			var mergedObject = {};

			for (p in tObj) {
				if (tObj.hasOwnProperty(p)) {
					mergedObject[p] = 1;
				}
			}
			;
			for (p in params) {
				if (params.hasOwnProperty(p)) {
					mergedObject[p] = 1;
				}
			}
			;

			for (p in mergedObject) {
				if (tObj.hasOwnProperty(p) && params.hasOwnProperty(p)) {
					if (tObj[p] != params[p]) {
						tstr += "Параметр " + p + ": '" + params[p]
								+ "' -&gt; '" + tObj[p] + "'<br />";
					}
				} else if (tObj.hasOwnProperty(p) || params.hasOwnProperty(p)) {
					if (tObj.hasOwnProperty(p)) {
						tstr += "Новый параметр: " + p + " = '" + tObj[p]
								+ "'<br />";
					} else {
						tstr += "Нет параметра: " + p + ", имевшего значение: "
								+ params[p] + "<br />";
					}
				}
			}

			if (tstr == '') {
				tstr = 'Изменений не найдено';
			}
			//alert(tstr);
			document.getElementById('changes').innerHTML = tstr;
			params = tObj;
		}

	}

	function get_previoussibling(n) {
		x = n.previousSibling;
		while (x.nodeType != 1) {
			x = x.previousSibling;
		}
		return x;
	}

	function del(obj) {
		//alert(obj.value);
		relem = get_previoussibling(obj);
		relem.parentNode.removeChild(relem);
		relem = get_previoussibling(obj);
		relem.parentNode.removeChild(relem);
		obj.parentNode.removeChild(obj);
	}

	function newElement(obj) {
		var tname = document.getElementById('newname').value;

		if (tname) {

			if (!document.forms[0].hasOwnProperty(tname)) {

				var tstr = '<label>'
						+ tname
						+ ': </label><input type="text" name="'+tname+'" /> <input type="button" value="x" onclick="del(this)" />';
				var newDiv = document.createElement("div");
				newDiv.innerHTML = tstr;
				document.getElementById('elements').appendChild(newDiv);
			} else {
				alert('Поле с таким именем уже существует!');
			}
		}
	}
</script>

</head>
<body onload="init()">
	<form action="" id="theForm" name="firstForm">
		<h2 id="enterData">Введите данные:</h2>
		<div id="elements">
			<div>
				<label>fio: </label><input type="text" name="fio" /> <input
					type="button" value="x" onclick="del(this)" />
			</div>
			<div>
				<label>phone: </label><input type="text" name="phone" /> <input
					type="button" value="x" onclick="del(this)" />
			</div>
			<div>
				<label>email: </label><input type="text" name="email" /> <input
					type="button" value="x" onclick="del(this)" />
			</div>
		</div>
		<input type="button" id="submitButton" value="Пуск!"
			onclick="clicked(this)" name="button" />
		<h2>Изменения</h2>
		<p id="changes"></p>
		<div id="addElement">
			<hr />
			<h3>Добавить элемент к форме</h3>
			<label>name: </label><input type="text" id="newname"> <input
				type="button" id="createNew" value="+" onclick="newElement()" />
		</div>
	</form>

</body>
</html>